<template>
  <div class="tabsChart_box">
    <div class="tab_btns">
      <!-- <span class="active" btn>实时在线人数</span>
      <span btn>进场人数</span>
      <span btn>离场人数</span> -->
      <span 
        v-for="item,idx in tabs" 
        :key="'tabs'+idx" 
        @click="tabClick(item)" 
        :class="{'active':item.isChecked}">{{item.name}}</span>
    </div>
    <div class="tab_content" :style="{'height':chartHeight}" v-if="!isNodata">
      <van-loading class="loading" v-if="loading" type="spinner" :vertical="true"/>
      <slot />
    </div>
    <div class="noData" v-else>
      <img src="@/assets/three/noData.png" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
// import testIcon5 from '@/assets/zhao/live/redpacket.png'
export default {
  name: 'tabsChart',
  components: {},
  props: {
    tabNames:Array,
    chartHeight:String,
    loading:Boolean,
    isNodata:Boolean,
  },
  data() {
    return {
      // tabChecked:[],
      tabs:[],
    }
  },
  computed: {},
  watch:{
  },
  created() {
    this.tabNames.forEach((item,idx)=>{
      let isChecked = (!idx); //默认第一个选中
      this.tabs.push({id:idx,name:item,isChecked});
    });
    // this.$emit('addTab',this.tabs[0]);
  },
  mounted() {
  },
  methods: {
    tabClick(item){
      // this.$emit('tabClick',this.tabChecked);
      if(!(this.isAlone() && item.isChecked)){  //最少保留一个选中
        item.isChecked = !item.isChecked;
        if(item.isChecked){
          this.$emit('addTab',item);
        }else{
          this.$emit('removeTab',item);
        }
      }
      // this.$emit('tabClick',);
    },
    isAlone(){
      let isExist = this.tabs.filter((itemC)=>{
        return itemC.isChecked;
      });
      return (isExist.length == 1);
    },
  },
}
</script>
<style lang='stylus' scoped>
@import '~@/common/common.styl';
.tabsChart_box{
  .tab_btns{
    display: flex;
    span{
      box-sizing: border-box
      flex:1;
      height: rem(60)
      font-size: rem(24)
      text-align: center
      line-height: rem(60)
      border-radius: 4px
      margin-right: rem(14)
      border: 1px solid #e5e5e5
      background-color: #fff
      color: #555
      transition: all 100ms linear
      &:last-child{
        margin-right:0;
      }
      &.active{
        background-color: #fd7f2c
        color: #fff
        border-color: #fd7f2c
      }
    }
  }
  .tab_content{
    position: relative;
    .loading{
      position: absolute
      top: 50%;
      margin-top: -40px;
    }
  }
}
.noData {
  width: 5.3333rem;
  height: 4rem;
  margin: 0.8rem auto 0.2rem auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
</style>